<template>
    <div class='followup-page'>
        <el-alert type="success">
            <h3>医疗服务随访记录</h3>
            <div class="alertContent">
                <span>姓名:{{ name }}</span>
                <span>年龄:{{ age }}</span>
            </div>
        </el-alert>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="code" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="followDate" label="随访日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="lsh" label="流水号">
            </el-table-column>
            <el-table-column prop="nextDate" label="下次随访日期">
            </el-table-column>
            <el-table-column prop="followDoctor" label="随访医生">
            </el-table-column>
            <el-table-column label="查看">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="onClick(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <followupData ref="openData" v-if="show" @close="show = false"></followupData>
    </div>
</template>

<script>
import { healthAPI } from '@/http';
import followupData from './followupData.vue';
export default {
    name: 'followup-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'followup-page',
            tableData: [],
            name: '',
            age: 0,
            show: false,
        }
    },
    created() {
        this.getDataList();

    },
    components: {
        followupData
    },
    methods: {
        getDataList() {
            healthAPI.getFollowListAPI().then(res => {
                console.log('sasda', res);
                this.tableData = res.data;
                this.name = this.tableData[0].name;
                this.age = this.tableData[0].age;
            })
        },
        onClick(row) {
            this.show = true
            this.$nextTick(() => {
                this.$refs.openData.open(row)
            })
        },
    }
}
</script>

<style scoped lang="less">
.alertContent {
    padding: 15px 0;
    width: 200px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
</style>